<template>
  <view v-if="newData && ((isSpe && newData.status.status) || !isSpe)">
    <view class="page-footer" id="target" style="background-color: #FAFAFA;">
      <view class="foot-item" v-for="(item, index) in newData.menuList" :key="index" @click="goRouter(item)"
        style="background-color: #FAFAFA;">
        <block v-if="item.link == activityTab">
          <image :src="item.imgList[0]" class="active"></image>
          <view class="txt" style="background-color: #FAFAFA;">{{ $t(item.name) }}</view>
        </block>
        <block v-else>
          <image :src="item.imgList[1]"></image>
          <view class="txt" style="background-color: #FAFAFA;">{{ $t(item.name) }}</view>
        </block>
        <div class="count-num" v-if="item.link === '/pages/order_addcart/order_addcart' && cartNum > 0">
          {{ cartNum > 99 ? '99+' : cartNum }}
        </div>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapGetters
  } from 'vuex';
  import {
    getNavigation
  } from '@/api/public.js';
  import {
    getCartCounts
  } from '@/api/order.js';
  export default {
    name: 'pageFooter',
    props: {
      status: {
        type: Number | String,
        default: 1
      },
      countNum: {
        type: Number | String,
        default: 0
      },
      isSpe: {
        type: Number,
        default: 0
      },
      dataConfig: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        newData: undefined,
        footHeight: 0,
        isShow: false // 弹出动画
      };
    },
    computed: {},
    computed: mapGetters(['isLogin', 'cartNum', 'activityTab']),
    watch: {
      activityTab: {
        handler(nVal, oVal) {},
        deep: true
      },
      configData: {
        handler(nVal, oVal) {
          let self = this;
          const query = uni.createSelectorQuery().in(this);
          this.newData = nVal;
          this.$nextTick(() => {
            query
              .select('#target')
              .boundingClientRect((data) => {
                uni.$emit('footHeight', data.height);
                if (data) {
                  self.footHeight = data.height + 50;
                }
              })
              .exec();
          });
        },
        deep: true
      }
    },
    created() {
      let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
      let curRoute = routes[routes.length - 1].route; //获取当前页面路由
      this.$store.commit('ACTIVITYTAB', '/' + curRoute);
      uni.$on('uploadFooter', () => {
        let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
        let curRoute = routes[routes.length - 1].route; //获取当前页面路由
        this.$store.commit('ACTIVITYTAB', '/' + curRoute);
      });
      console.log('xxxx');
    },
    onShow() {},
    mounted() {
      if (this.isSpe) {
        this.newData = this.dataConfig;
      } else {
        getNavigation().then((res) => {
          uni.setStorageSync('pageFoot', res.data);
          this.$store.commit('FOOT_UPLOAD', res.data);
          this.newData = res.data;
        });
        let that = this;
        uni.hideTabBar();
        this.newData = this.$store.state.app.pageFooter;
        if (this.isLogin) {
          this.getCartNum();
        }
      }
    },
    onHide() {
      uni.$off(['uploadFooter']);
    },
    methods: {
      goRouter(item) {
        var pages = getCurrentPages();
        var page = pages[pages.length - 1].route;
        this.$store.commit('ACTIVITYTAB', item.link);
        if (item.link.includes(page)) return
        if (item.link == '/pages/index/index' || item.link == '/pages/user/index_v2') {
          uni.switchTab({
            url: item.link,
            fail(err) {
              uni.redirectTo({
                url: item.link
              });
            }
          });
        } else {
          uni.navigateTo({
            url: item.link,
            fail(err) {
              console.error(err)
              uni.redirectTo({
                url: item.link
              });
            }
          });
        }

      },
      getCartNum: function() {
        let that = this;
        getCartCounts().then((res) => {
          that.cartCount = res.data.count;
          this.$store.commit('indexData/setCartNum', res.data.count > 99 ? '...' : res.data.count);
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .page-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: nowrap;
    width: 100%;
    height: 98rpx;
    height: calc(98rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
    height: calc(98rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
    box-sizing: border-box;
    border-top: solid 1rpx #f3f3f3;
    backdrop-filter: blur(10px);
    background-color: #fafafa;
    box-shadow: 0px 0px 17rpx 1rpx rgba(206, 206, 206, 0.32);
    padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
    padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
    // transform: translate3d(0, 100%, 0);
    // transition: all .3s cubic-bezier(.25, .5, .5, .9);

    .foot-item {
      display: flex;
      width: max-content;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      position: relative;
      width: 100%;
      height: 100%;

      .count-num {
        position: absolute;
        display: flex;

        justify-content: center;
        align-items: center;
        width: 40rpx;
        height: 40rpx;
        top: 0rpx;
        right: calc(50% - 55rpx);
        color: #fff;
        font-size: 20rpx;
        background-color: #fd502f;
        border-radius: 50%;
        padding: 4rpx;
      }

      .active {
        animation: mymove 1s 1;
      }

      @keyframes mymove {
        0% {
          transform: scale(1);
          /*开始为原始大小*/
        }

        10% {
          transform: scale(0.8);
        }

        30% {
          transform: scale(1.1);
          /*放大1.1倍*/
        }

        50% {
          transform: scale(0.9);
          /*放大1.1倍*/
        }

        70% {
          transform: scale(1.05);
        }

        90% {
          transform: scale(1);
        }
      }
    }

    .foot-item image {
      height: 37rpx;
      width: 35rpx;
      text-align: center;
      margin: 0 auto;
    }

    .foot-item .txt {
      font-size: 24rpx;
    }
  }
</style>